@success: 'e-tag--success';
@tag-prefix-cls: ~'@{css-prefix}tag';

@tag-default-border-color: #75849B;
@tag-default-bg-color:@tag-default-border-color;
@tag-default-bg-host-color:#E9EDF2;
@tag-primary-bg-host-color:#E8F0FF;
@tag-success-bg-host-color:#E7F7EA;
@tag-warning-bg-host-color:#FEF1E7;
@tag-error-bg-host-color:#FCEBEA;
//@success{
//  border-color: @color-functional-success;
//}
.e-tag {
  display: inline-block;
  white-space: nowrap;
  box-sizing: border-box;
  background-color: #fff;
  border: @tag-default-border;
  color: @tag-default-color;

  &-border {
    border: 1px solid @color-brand-primary;
  }

  &-default {
    background-color: @color-bg-nomal;
  }

  &-success {
    .tag-status(@color-functional-success);
    .svg-fill(@color-functional-success);
  }
  &-success&-border&-checked,&-success:not(.e-tag-border){
    .tag-status(@color-functional-success);
    background-color: @color-bg-success;
    .svg-fill(@color-functional-success);
  }

  &-error {
    .tag-status(@color-functional-fail);
    .svg-fill(@color-functional-fail);
  }
  &-error&-border&-checked,&-error:not(.e-tag-border){
    .tag-status(@color-functional-fail);
    background-color: @color-bg-fail;
    .svg-fill(@color-functional-fail);
  }

  &-warning {
    .tag-status(@color-functional-warning);
    .svg-fill(@color-functional-warning);
  }
  &-warning&-border&-checked,&-warning:not(.e-tag-border){
    .tag-status(@color-functional-warning);
    background-color: @color-bg-warning;
    .svg-fill(@color-functional-warning);
  }

  &-ing {
    .tag-status(@color-functional-processing);
    .svg-fill(@color-functional-processing);
  }
  &-ing&-border&-checked,&-ing:not(.e-tag-border){
    .tag-status(@color-functional-processing);
    background-color: @color-bg-nomal;
    background-color: @color-bg-pause;
    .svg-fill(@color-functional-processing);
  }

  &-suspend {
    .tag-status(@color-functional-pause);
    .tag-status(@tag-default-color);
    .svg-fill(@color-functional-pause);
    .svg-fill(@tag-default-color)
  }
  &-suspend&-border&-checked,&-suspend:not(.e-tag-border){
    .tag-status(@color-functional-pause);
    .tag-status(@tag-default-color);
    background-color: @color-bg-pause;
    background-color: @tag-default-color;
    color: #fff;
    .svg-fill(@color-functional-pause);
    .svg-fill(@tag-default-color)
  }

  &-medium {
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
  }

  &-small {
    height: 24px;
    line-height: 22px;
    padding: 0 8px;
  }

  &-mini {
    height: 20px;
    padding: 0 5px;
    line-height: 19px;
  }
}

.icon {
  width: 10px;
  height: 10px;
  margin-left: 5px;

  &:hover {
    cursor: pointer;
  }
}

.e-tag-success.e-tag-checked {
  .svg-fill(@color-complementary-17);
  .tag-status(@color-functional-success);
  background: @color-complementary-16;
  border-color: @color-complementary-16;
  color: @color-complementary-17;
  border-radius: 2px;
}

.e-tag-success.e-tag-border.e-tag-checked{

}

.e-tag-success.e-tag-disable {
  .svg-fill(#bbb);
  // background: #fff;
  background: #F5F5F6;
  color: #bbb;
  // border-color: #D7D8DC;
  cursor:not-allowed;
  // background-color: #D7D8DC;
}

.@{tag-prefix-cls}-success .e-tag-checked {
  .tag-icon(@color-complementary-17);
}

.@{tag-prefix-cls}-success .e-tag-disable {
  // .tag-icon(#bbb);
  .tag-icon(#F5F5F6);
}

.e-tag-error.e-tag-checked {
  .svg-fill(@color-complementary-19);
  // .tag-dark(@color-functional-fail);
  .tag-status(@color-functional-success);
  background: @color-complementary-18;
  border-color: @color-complementary-18;
  color: @color-complementary-19;
  border-radius: 2px;
}

.e-tag-error.e-tag-disable {
  .svg-fill(#bbb);
  background: #fff;
  color: #bbb;
  border-color: #f5f5f5;
}

.@{tag-prefix-cls}-error .e-tag-checked {
  .tag-icon(@color-complementary-19);
}

.@{tag-prefix-cls}-error .e-tag-disable {
  .tag-icon(#bbb);
}

.e-tag-warning.e-tag-checked {
  .svg-fill(@color-complementary-21);
  .tag-status(@color-functional-warning);
  background: @color-complementary-20;
  border-color: @color-complementary-20;
  color: @color-complementary-21;
  border-radius: 2px;
}

.e-tag-warning.e-tag-disable {
  .svg-fill(#bbb);
  background: #fff;
  color: #bbb;
  border-color: #f5f5f5;
}

.@{tag-prefix-cls}-warning .e-tag-checked {
  .tag-icon(#bbb);
}

.@{tag-prefix-cls}-warning .e-tag-disable {
  .tag-icon(#bbb);
}

.e-tag-ing.e-tag-checked {
  .svg-fill(@color-complementary-15);
  .tag-dark(@color-complementary-14);
  color: @color-complementary-15;
}

.e-tag-ing.e-tag-disable {
  .svg-fill(#bbb);
  background: #fff;
  color: #bbb;
  border-color: #f5f5f5;
}

.@{tag-prefix-cls}-warning .e-tag-checked {
  .tag-icon(@color-complementary-15);
}

.@{tag-prefix-cls}-warning .e-tag-disable {
  .tag-icon(#bbb);
}

.e-tag-suspend.e-tag-checked {
  .svg-fill(@color-complementary-15);
  .tag-dark(@color-functional-pause);
}

.e-tag-suspend.e-tag-disable {
  .svg-fill(#bbb);
  background: #fff;
  color: #bbb;
  border-color: #f5f5f5;
}

.@{tag-prefix-cls}-suspend .e-tag-checked {
  .tag-icon(@color-complementary-15);
}

.@{tag-prefix-cls}-suspend .e-tag-disable {
  .tag-icon(#bbb);
}

.@{tag-prefix-cls} {
  display: inline-block;
  white-space: nowrap;
  box-sizing: border-box;
  background-color: #fff;
  color: #333;

  .e-tag-icon {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 4px;
    position: relative;
    vertical-align: -0.125em;
  }

  &-success {
    .e-tag-icon {
      background-color: @color-functional-success;
      &.haloe-tag-aniamation {
        .tag-aniamation( @color-functional-success,@color-bg-page);
        &:before {
          .tag-aniamation-before(@color-functional-success)
        }
      }
    }
  }

  &-error {
    .e-tag-icon {
      background-color: @color-functional-fail;
      &.haloe-tag-aniamation {
        .tag-aniamation( @color-functional-fail,@color-bg-page);
        &:before {
          .tag-aniamation-before(@color-functional-fail)
        }
      }
    }
  }

  &-warning {
    .e-tag-icon {
      background-color: @color-functional-warning;
      &.haloe-tag-aniamation {
        .tag-aniamation( @color-functional-warning,@color-bg-page);
        &:before {
          .tag-aniamation-before(@color-functional-warning)
        }
      }
    }
  }

  &-ing {
    .e-tag-icon {
      background-color: @color-functional-processing;
      &.haloe-tag-aniamation {
        .tag-aniamation(@color-functional-processing,@color-bg-page);
        &:before {
        .tag-aniamation-before(@color-functional-processing)
        }
      }
    }
  }

  &-suspend {
    .e-tag-icon {
      background-color: @color-functional-pause;

      &.haloe-tag-aniamation {
        .tag-aniamation(@color-functional-pause,@color-bg-page);
        &:before {
          .tag-aniamation-before(@color-functional-pause)
        }
      }
    }
  }

  &-medium {
    padding: 0 10px;
    height: 28px;
    line-height: 28px;
  }

  &-small {
    height: 24px;
    line-height: 22px;
    padding: 0 8px;
  }

  &-mini {
    height: 20px;
    padding: 0 5px;
    line-height: 19px;
  }
}

.e-tag-success.close-hover {
  background-color: #dff5d5;
}

.@{tag-prefix-cls}-success.close-hover {
  background-color: #dff5d5;
}

.e-tag-error.close-hover {
  background-color: #ffe2df;
}

.@{tag-prefix-cls}-error.close-hover {
  background-color: #ffe2df;
}

.e-tag-warning.close-hover {
  background-color: #fcf0d3;
}

.@{tag-prefix-cls}-warning.close-hover {
  background-color: #fcf0d3;
}

.e-tag-ing.close-hover {
  &:not(.e-tag-checked) {
    background-color: #dbe8ff;
  }
}

.@{tag-prefix-cls}-ing.close-hover {
  background-color: #dbe8ff;
}

.e-tag-suspend.close-hover {
  background-color: #e1e7ee;
    background-color: #E9EDF2;
    background-color: #75849B;
}

.@{tag-prefix-cls}-suspend.close-hover {
  background-color: #e1e7ee;
  background-color: #E9EDF2;
}

.haloe-tag-span {
  position: relative;
}

@keyframes loading-beat {
  /* 0%{
    transform: translateY(0) scale(1);
  }
  25% {
     transform: translateY(0px) scale(1.8);
  }
  50%, 75%, 100% {
    transform: translateY(0px) scale(1);
  } */
  0% {
    transform: translateY(0) scale(1);
  }

  25% {
    transform: translateY(0px) scale(1.5);
  }

  50%,
  75%,
  100% {
    transform: translateY(0px) scale(1);
  }

  /* 50% {
    transform: translateY(0px) scale(1.8);
  }
  75%{
    transform: scale(1);
  }
  100%{
    transform: scale(0.5);
  } */
}

.tag-aniamation(@color-border,@background) {
  /* margin-right: 5px; */
  animation-name: loading-beat;
  /* 动画完成一个周期所需要的时间 */
  animation-duration: 1.2s;
  /* 定义动画从何时开始（延迟） */
  animation-delay: 0s;
  /* 动画播放次数（无限） */
  animation-iteration-count: infinite;
  border: 1px solid @color-border;
  background-color: @background;
}

.tag-aniamation-before(@backgroud) {
  //  background: #E6804A;
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  content: '';
  margin: 0 auto;
  top: 1px;
  left: 1px;
  background-color: @backgroud;
  animation-name: loading-beat;
  /* 动画完成一个周期所需要的时间 */
  /* 定义动画从何时开始（延迟） */
  /* 动画播放次数（无限） */
  animation-iteration-count: infinite;
}
